<%@ taglib prefix="v-on" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<%@include file="/resources/common/common.jsp" %>
<head>
    <title>index</title>
</head>
<body>
<body>


------------------------------------------------------------------------------------------------
<!--这是我们的View-->
<div id="app">
    <p>{{ message }}</p>
    <%--v-bind由于经常会用到，所以也可以缩写成冒号:--%>
    <%--v-on由于经常会用到，所以也可以缩写成冒号@--%>
    <a v-bind:ssname="ssname">标签</a>
    <input type="text" v-model="message"/>
</div>

<div id="firstVue" :hidden="my_hidden">{{my_data}}</div>
<div id="myvue1">
    <input type="number" v-model.number="my_step" />
    <button v-on:click="clickButton">Add</button>
    <button @click="clickButton2">Click Me</button>
    <p>{{my_total}}</p>
</div>
------------------------------------------------------------------------------------------------
</body>
</body>
</html>
<script src="<%=basePath%>/resources/js/demo/index.js"></script>
<script>

    new Vue ({
        el:"#myvue1",
        data:{
            my_step: 1,
            my_total: 0
        },
        methods:{
            clickButton:function () {
                firstVue.my_data = "有钱,罗帅哥";
                this.my_total = this.my_total + this.my_step;
//                alert(333)
            },
            clickButton2:function () {
                this.my_total = "Wow! I'm changed!"
            }
        }
    });
    var firstVue=new Vue({
        el:"#firstVue",
        data:{
            my_data:"Hello,罗帅哥",
            my_hidden:false,

        }
    });

    // 这是我们的Model
    var exampleData = {
        message: 'Hello World22ddd!',
        my_hidden:false,
        ssname:"hmp"
    };
    // 创建一个 Vue 实例或 "ViewModel"
    // 它连接 View 与 Model
    var vm1=new Vue({
        el:"#app",
        data :function(){
            return exampleData;
        }
    });

</script>